<script setup lang="ts">
const props = defineProps({
    searchTerm: {
        type: String,
        default: '', // 搜索关键词
    },
})
const emit = defineEmits(['cancelSearch'])

const cancelSearch = () => {
    emit('cancelSearch')
}
</script>

<template>
      <div v-show="props.searchTerm" class="w-full flex justify-center items-center mt-5 mb-10">

      <div class="lg:w-[900px] md:w-[470px] sm:w-[300px]h-[50px] bg-yellow-300 rounded-lg flex justify-between items-center px-10">

        <p class="sm:text-base lg:text-xl">搜索内容：{{ searchTerm }}</p>
        <button class="sm:text-base lg:text-xl border p-1 rounded-2xl textColor-1 hover:bg-gray-200" @click="cancelSearch">取消搜索</button>
      </div>
    </div>
</template>

<style scoped>

</style>
